import React from 'react';
import './header.css';
import {NavLink} from 'react-router-dom';
import myHome from './images/antOutline-home.png';
import myService from './images/antOutline-customer-service.png';
import myTeam from './images/antOutline-team.png';


const Header = () => {
    return (
        <div className="headerContainer">

            <NavLink className="navlink nav" to='/system' activeClassName="light">
                <img className="headerImg" src={myHome}/>系统管理
            </NavLink>
    
            
            <NavLink className="navlink nav" to='/music' activeClassName="light">
                <img className="headerImg" src={myService}/>音乐视频管理
            </NavLink>
        
            
            <NavLink className="navlink nav" to='/list' activeClassName="light">
                <img className="headerImg" src={myTeam}/>解忧事项管理
            </NavLink>
       
            {/* <div className="nav" tabIndex="1">
                <img className="headerImg" src={myHome}/>
                <NavLink className="navlink nav" to='/system' activeClassName="light">系统管理</NavLink>
            </div>
            <div className="nav" tabIndex="1">
                <img className="headerImg" src={myService}/>
                <NavLink className="navlink nav" to='/music' activeClassName="light">音乐视频管理</NavLink>
            </div>
            <div className="nav" tabIndex="1">
                <img className="headerImg" src={myTeam}/>
                <NavLink className="navlink nav" to='/list' activeClassName="light">解忧事项管理</NavLink>
            </div> */}
        </div>
    )
}

export default Header
